<template>
  <a-progress v-if="!message" :percent="percent" size="small" />
  <a v-if="percent == 100" v-redirect="path" @click="jump">前往查看</a>
  <a-alert v-if="message" message="失败" type="error" show-icon>
    <template #description>
      <div v-html="message"></div>
    </template>
  </a-alert>
</template>

<script>
export default {
  name: "ExProgress"
}
</script>
<script setup>
  const props  = defineProps({
    refresh:Boolean,
    class:String,
    grid:Object
  })
  import request from '@/utils/axios'
  import {action} from '@/store'
  import {useRoute} from "vue-router"
  import {onBeforeUnmount,ref} from 'vue';
  const route = useRoute()
  const percent = ref(0)
  const message = ref('')
  const path = route.fullPath
  let timer
  onBeforeUnmount(()=>{
    clearInterval(timer)
  })
  init()
  function init(){
    request('ex-admin/system/queueInit?key='+props.class).then(()=>{
      timer = setInterval(()=>{
        query()
      },500)
    })
  }
  function query(){
    request('ex-admin/system/queueProgress?key='+props.class).then((result)=>{
      if(isNaN(result.data)){
        message.value = result.data
        clearInterval(timer)
      }else{
        percent.value = result.data
        if(percent.value == 100){
          clearInterval(timer)
          if(props.refresh && route.fullPath === path){
            jump()
          }
        }
      }
    })
  }
  function jump(){
    if(props.grid){
      props.grid.refresh()
    }else{
      action.loadComponent(path,true)
    }
  }
</script>
<style scoped>

</style>